<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 禁用电话号码检测功能，禁止对数字随便可以拨号 -->
		<meta name="format-detection" content="telephone=no">
		<!-- 禁用地址检测功能，禁止跳转到地图 -->
		<meta name="format-detection" content="address=no">
		<!-- 在苹果设备上以全屏方式打开本网页 -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- 设置在苹果设备上状态的颜色，默认白色，要设置成什么颜色以Web颜色的风格而定 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="white">
		<title>微信商城-购物车</title>
		<link rel="stylesheet" type="text/css" href="vendor/normalize.min.css"/>
		<!-- 可选 -->
		<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="vendor/swiper/swiper.min.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/shopcar.css" />
		<!-- 苹果设备在桌面上生成的快捷图标 -->
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
		<link rel="icon" href="img/favicon.ico">
	</head>
	
	<body>
		<header class="header-wrapper">
			<ul class="header-list">
				<li>
					<a href="index.jsp">
						<i class="fa fa-2x fa-home"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="productlist.html">
						<i class="fa fa-2x fa-th"></i>
						<p>商品分类</p>
					</a>
				</li>
				<li class="list-active">
					<a href="shopcar.jsp">
						<i class="fa fa-2x fa-shopping-cart"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="userinfo.jsp">
						<i class="fa fa-2x fa-user"></i>
						<p>用户中心</p>
					</a>
				</li>
			</ul>
		</header>
		<section style="width: 100%; height: .6rem;"></section>
		
        <section class="shopcar-container">
        	<div class="container-item">
        		<a href="">
        			<div class="item-top">
	        			<img src="img/product1.png"/>
	        			<div class="top-right">
	        				<span>广联达变更算量-微信专享版</span>
	        			</div>
	        		</div>
        		</a>
        		<div class="item-center">
        			<div class="center-span">
        				<span>数量:</span>
        			</div>
        			<div class="center-inner">
						<div class="inner-Reduction">
					    	-
					    </div>
					    <input class="shopcar-value" type="text" style="width: 1.2rem;height: .3rem;border: none;text-align: center;color: #990000;font-size: .16rem;font-weight: bold;position: absolute;top: 0;left: 21%;" value="1"/>
					    <div class="inner-plus">
					    	+
					    </div>
					</div>
        		</div>
        		<div class="item-bottom">
        			<div class="bottom-span">
        				<span>小计：</span>
        			</div>
        			<div class="bottom-right">
        				<span class="price">￥535</span>&nbsp;&nbsp;&nbsp;&nbsp;
        				<i class="fa fa-trash-o fa-2x right-delete"></i>	
        			</div>
        		</div>
        	</div>
        	<div class="container-item">
        		<a href="">
        			<div class="item-top">
	        			<img src="img/Y4.png"/>
	        			<div class="top-right">
	        				<span>广联达变更算量-微信专享版</span>
	        			</div>
	        		</div>
        		</a>
        		<div class="item-center">
        			<div class="center-span">
        				<span>数量:</span>
        			</div>
        			<div class="center-inner">
						<div class="inner-Reduction">
					    	-
					    </div>
					    <input type="text" style="width: 1.2rem;height: .3rem;border: none;text-align: center;color: #990000;font-size: .16rem;font-weight: bold;position: absolute;top: 0;left: 21%;" value="1"/>
					    <div class="inner-plus">
					    	+
					    </div>
					</div>
        		</div>
        		<div class="item-bottom">
        			<div class="bottom-span">
        				<span>小计：</span>
        			</div>
        			<div class="bottom-right">
        				<span class="price">￥535</span>&nbsp;&nbsp;&nbsp;&nbsp;
        				<i class="fa fa-trash-o fa-2x right-delete"></i>	
        			</div>
        		</div>
        	</div>
        	<div class="container-item">
        		<a href="">
        			<div class="item-top">
	        			<img src="img/Y1.jpg"/>
	        			<div class="top-right">
	        				<span>广联达变更算量-微信专享版</span>
	        			</div>
	        		</div>
        		</a>
        		<div class="item-center">
        			<div class="center-span">
        				<span>数量:</span>
        			</div>
        			<div class="center-inner">
						<div class="inner-Reduction">
					    	-
					    </div>
					    <input type="text" style="width: 1.2rem;height: .3rem;border: none;text-align: center;color: #990000;font-size: .16rem;font-weight: bold;position: absolute;top: 0;left: 21%;" value="1"/>
					    <div class="inner-plus">
					    	+
					    </div>
					</div>
        		</div>
        		<div class="item-bottom">
        			<div class="bottom-span">
        				<span>小计：</span>
        			</div>
        			<div class="bottom-right">
        				<span class="price">￥535</span>&nbsp;&nbsp;&nbsp;&nbsp;
        				<i class="fa fa-trash-o fa-2x right-delete"></i>	
        			</div>
        		</div>
        	</div>
        	<div class="container-item">
        		<a href="">
        			<div class="item-top">
	        			<img src="img/Y2.jpg"/>
	        			<div class="top-right">
	        				<span>广联达变更算量-微信专享版</span>
	        			</div>
	        		</div>
        		</a>
        		<div class="item-center">
        			<div class="center-span">
        				<span>数量:</span>
        			</div>
        			<div class="center-inner">
						<div class="inner-Reduction">
					    	-
					    </div>
					    <input type="text" style="width: 1.2rem;height: .3rem;border: none;text-align: center;color: #990000;font-size: .16rem;font-weight: bold;position: absolute;top: 0;left: 21%;" value="1"/>
					    <div class="inner-plus">
					    	+
					    </div>
					</div>
        		</div>
        		<div class="item-bottom">
        			<div class="bottom-span">
        				<span>小计：</span>
        			</div>
        			<div class="bottom-right">
        				<span class="price">￥535</span>&nbsp;&nbsp;&nbsp;&nbsp;
        				<i class="fa fa-trash-o fa-2x right-delete"></i>	
        			</div>
        		</div>
        	</div>
        	
        	<div class="container-inner">
        		<div class="inner-car">
        			<img src="img/cart_pic.png"/>
        		</div>
        		<p>您还没有宝贝，赶快去逛逛吧!</p>
        		<div class="inner-now">
        			<a href="productlist.html">马上去逛逛</a>
        		</div>
        	</div>
        </section>
        
       <section style="width: 100%;height: .5rem;"></section>
        <footer class="shopcar-footer">
        	<div class="footer-left">
        		<i class="fa fa-trash-o fa-2x clear"></i>
        		<span>清空</span>&nbsp;&nbsp;&nbsp;&nbsp;
        		<span class="left-price">总价： <span>￥79743</span></span>
        	</div>
        	<div class="footer-right">
        		<a href="orderlist.jsp">结算</a>
        	</div>
        </footer>
		
		<script src="js/resize.js"></script>
	</body>
</html>
